<template>
    <div>
        <div class="title">
            热销推荐
        </div>
        <ul>
            <router-link
            tag="li"
            :to="'/detail/' + item.id"
            class="item border-bottom"
            v-for="item of list"
            :key="item.id"
            >
                    <img class="item-img" :src="item.imgUrl" alt="">
                    <span
                    class="type"
                    >{{item.text}}</span>
                <div class="text-wrapper">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                    <div class="item-price">
                        <span class="before">￥</span>
                        <em class="price">{{item.price}}</em>
                        <span class="after">起</span>
                    </div>
                    <div class="item-area">{{item.area}}</div>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'HomeRecommend',
    props: {
        list: Array
    }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/mixins.styl'
    .title
        line-height .8rem
        background-color #eee
        text-indent .2rem
        margin-top .1rem
        font-weight 900
    .item
        display flex
        height 2.4rem
        overflow hidden
        .item-img
            width 2rem
            height 2rem
            padding .2rem
        .type
            position absolute
            top .2rem
            left .2rem
            height .4rem
            line-height .4rem
            color #fff
            border-radius 0 0 .2rem 0
            background #ff8300
        .text-wrapper
            // 自动撑开
            flex 1
            padding .1rem
            min-width 0
            .item-title
                line-height .54rem
                font-size .32rem
                font-weight bold
                margin-top .25rem
                ellipsis()
            .item-desc
                line-height .4rem
                color #888
                margin-top .1rem
                ellipsis()
            .item-btn
                background-color #ff9300
                padding 0 .2rem
                margin-top .2rem
                border-radius .06rem
                color #fff
                line-height .44rem
            .item-price
                padding-top .3rem
                color #888
                font-size 0
                .before
                    font-size .2rem
                    color #ff8300
                .price
                    color #ff8300
                    font-size .48rem
                    margin-left 0
                .after
                    font-size .2rem
            .item-area
                position absolute
                width 1.4rem
                line-height .45rem
                right 0
                bottom .2rem
                padding-right .2rem
                text-align center
                color #888
                ellipsis()
</style>
